<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		
		<style>
			#div01
			{
				width: 200px;
				height: 80px;
				margin: 10px;
				background-color: blue;
				border: black 5px solid;
				
			}
		</style>
		
		<script>
		
			$(function(){
				
				$("button:first").click(function(){
					
					// jQuery
					$("#div01").hide();
					
					// display:none  不可见
					//         block  块元素
					//         inline 行内元素
				});
				
				$("button:eq(1)").click(function(){
					$("#div01").show();	
				});
				
				
				$("button:eq(2)").click(function(){
					
					// jQuery
					$("#div01").hide(1000);
				});
				
				$("button:eq(3)").click(function(){
					$("#div01").show(1000);	
				});
				
				$("button:eq(4)").click(function(){
					
					// jQuery
					$("#div01").hide(5000,function(){
						console.log("隐藏了")
					});
				});
				
				$("button:eq(5)").click(function(){
					// $("#div01").show(5000);	
				});
			});
		
		</script>
		
	</head>
	<body>
		
		<button>隐藏</button>
		
		<button>显示</button>
		<button>隐藏</button>
		<button>显示</button>
		<button>隐藏</button>
		<button>显示</button>
		
		<div id="div01"></div>
	</body>
</html>
